<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>设置群发消息</title>
	<link rel="shortcut icon" type="image/ico" href="${basePath}/images/ico.ico"/>
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style-1.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style_2_common.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/more_img.css" />
	<script type="text/javascript" src="${basePath}/js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${basePath}/js/layer/skin/layer.css" />
    <script type="text/javascript" src="${basePath}/js/layer/layer.m.js"></script>
</head>
<body id="nv_member" class="pg_CURMODULE">
	<#assign current='menu_mass'>
	<div id="wp" class="wp">
		<#include "/include/header.html"/>
		<!--中间内容-->
		<div class="contentmanage">
			<div class="developer">
				<div class="tableContent">
					<#include "/include/left.html"/>
					<#include "/include/wxtop.html"/>
					<div class="content">
						<!--活动开始-->
						<div class="cLineB">
							<h4 style="font-size:16px;">设置群发消息</h4>
						</div>
						<div class="msgWrap">
							<div style="float: left; width: 90%;">
							<form action="${basePath}/admin/mass/persis" method="post" onsubmit="return checkForm();">
								<table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin: 0;" class="userinfoArea">
									<tbody>
										<tr>
											<th valign="top"><span class="red">*</span>群发标题:</th>
											<td>
												<input type="text" name="title" placeholder="请输入标题" value="" class="px" style="width:300px;"/>
												<p>标题只是作为发送类型区分，不会发送给粉丝</p>
											</td>
										</tr>
										<tr>
											<th valign="top"><span class="red">*</span>选择群发消息:</th>
											<td>
												<input type="hidden" name="msgId" id="input_content"/>
												<input type="text" id="input_keyword" class="px" name="msgTitle" readonly/>
												<input id="input_isMultipart" type="hidden" name="msgType"/>
												<a class="a_choose" onclick="addImgMessage()" href="javascript:void(0);">选择资源消息</a>
												<a class="a_clear" onclick="clearMessage()" href="javascript:void(0);">清空重选</a>
											</td>
										</tr>
										<tr>
											<th valign="top"><span class="red">*</span>消息群发方式:</th>
											<td>
												<input type="radio" checked class="send_type" name="sendType" value="1"/>标签群发
<!-- 												<#if roleId==0> -->
<!-- 													<input type="radio" class="send_type" name="sendType" value="2"/>指定粉丝（请至少选择两位粉丝） -->
<!-- 													<input type="radio" class="send_type" name="sendType" value="3"/>全部粉丝 -->
<!-- 												</#if> -->
											</td>
										</tr>
										<tr id="tr_group">
											<th>请选择标签：</th>
											<td>
												<input type="text" id="input_tag_name" class="px" name="tagName" readonly/>
												<input type="hidden" name="groupInfos" id="input_groupinfos" />
												<a id="add_tag" class="a_choose" href="javascript:void(0);">选择标签</a>
												<a class="a_clear" onclick="clearTag()" href="javascript:void(0);">清空重选</a>
											</td>
												<!-- <#if groups?exists && groups?size gt 0>
												<p><select style="width:300px;" id="select_group">
													<#list groups as group>
													<option value="${group.groupId?default(0)}">${group.name?default('')}</option>
													</#list>
												</select></p>	
												<#else>
												<p><a href="${basePath}/fansGroup/index">还没有同步公众平台的粉丝分组，点击这里进行分组设置</a></p>
												</#if> -->
										</tr>
										<tr id="tr_fans" style="display:none;">
											<th valign="top">请选择粉丝：</th>
											<td colspan="2">
												<a id="add_fans" class="a_choose" href="javascript:void(0);">选择粉丝</a>
												<a id="clear_fans" href="javascript:void(0);">清空</a>
												<p>
													<textarea style="width: 300px; height: 60px; float: left;margin-top:2px;" class="px" id="fans_id" readonly></textarea>
												</p>
											</td>
										</tr>
										<tr>
											<th valign="top"></th>
											<td>
												<button class="btnGreen" name="button" type="submit">保存</button>
											</td>
										</tr>
									</tbody>
								</table>
							</form>
							</div>
							</div>
							<div class="clr"></div>
						</div>
						<div class="clr"></div>
					</div>
					<div class="clr"></div>
				</div>
			</div>
		</div>
		<!--底部-->
		
		<div style="display:none;" id="pick_item_com">
			<div style="font-size: 14px; padding: 10px 10px 10px 20px;">
				<!-- <div style="background: #fefbe4; border: 1px solid #f3ecb9; color: #993300; padding: 10px;margin: 5px auto 5px auto;">
					使用方法：点击对应内容后面的“选中”即可。您也可以点击 <a href="${basePath}/mul/index">添加多图文回复</a>
				</div> -->
				<table class="ListProduct" border="0" cellspacing="0" cellpadding="0" width="100%">
					<thead>
						<tr>
							<th>标题</th>
							<th>类型</th>
							<th style="width: 80px;">操作 <span class="tooltips"></span></th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display:none;" id="pick_item_com_one">
			<div style="font-size: 14px; padding: 10px 10px 10px 20px;">
				<input class="px" id="input_nickname" placeholder="请输入用户昵称" type="text"/>
				<input type="button" value="搜索" class="btnGrayS" onclick="search();">
				<button class="btnGreen" type="button" onclick="closeWin();" style="float:right;">确认选择</button>
				<table class="ListProduct" border="0" cellspacing="0" cellpadding="0" width="100%">
					<thead>
						<tr>
							<th>粉丝昵称</th>
							<th>分组名称</th>
							<th style="width: 80px;">&nbsp; <span class="tooltips"></span></th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		
		<div style="display:none;" id="pick_tag_com_one">
			<div style="font-size: 14px; padding: 10px 10px 10px 20px;">
				<!-- <input class="px" id="input_nickname" placeholder="请输入用户昵称" type="text"/>
				<input type="button" value="搜索" class="btnGrayS" onclick="search();"> -->
				<button class="btnGreen" type="button" onclick="closeWin();" style="float:right;">确认选择</button>
				<table class="ListProduct" border="0" cellspacing="0" cellpadding="0" width="100%">
					<thead>
						<tr>
							<th>标签名称</th>
							<th>标签类型</th>
							<th style="width: 80px;">&nbsp; <span class="tooltips"></span></th>
						</tr>
					</thead>
					<tbody id="tag_tbody">
					</tbody>
				</table>
			</div>
		</div>
	
	<#include "/include/footer.html"/>
	
<script type="text/javascript">
	function checkForm(){
		var $title = $("input[name='title']");
		var $keyword = $("#input_keyword");
		var $groupids = $("#fans_id");
		if($title.val()==""){
			$title.focus();
			layer.alert("请输入标题",{icon:0});
			return false;
		}
		if($keyword.val()==""){
			$keyword.focus();
			layer.alert("请选择消息",{icon:0});
			return false;
		}
		
		var $radio = $(":radio:checked");
		var arrayInfos = new Array();
		if($radio.val()==1){
			if($("#input_groupinfos").val()==''){
				$groupids.focus();
				layer.alert("标签信息不能为空",{icon:0});
				return false;
			}
		}else if($radio.val()==2){
			if($groupids.val()==''){
				$groupids.focus();
				layer.alert("粉丝信息不能为空",{icon:0});
				return false;
			}
		}
		return true;
	}
	function addImgMessage(){
		var dialog = function(){
			 var layerIndex = layer.open({
			    type: 1,
			    scrollbar: false,
			    area: ['600px', '450px'],
			    fix: true,
			    title: '选择消息',
			    content: $("#pick_item_com").html()
			});
			return layerIndex;
		}
		window.layerIndex = dialog();
	}
	function clearMessage(){
		$("#input_keyword").val("");
		$("#input_content").val("");
		$("#input_isMultipart").val("");
	}
	function makeData(pageIndex, select){
		var url = "${basePath}/admin/sub/ajax";
		$.post(url, {"currentPage":pageIndex}, function(data){
			if(!select){
				select = "#pick_item_com";
			}
			$tBody = $(select+" table tbody");
			console.log($tBody);
			for(var i=0;i<data.recordList.length;i++){
				var bean = data.recordList[i];
				var keyword = bean.keyword;
				var id = bean.id;
				var type = bean.type;
				var typeName = "";
				var $tr=null;
				if(type==4){
					typeName="音频回复";
				}else if(type==3){
					typeName="多图文回复";
					 $tr = $('<tr><td>'+keyword+'</td><td>'+typeName+'</td><td class="norightborder"><a href="javascript:void(0);" onclick="pickItem('+id+', \''+keyword+'\', \''+type+'\');">选中</a></td></tr>')
				}else if(type==2){
					typeName="单图文回复";
					$tr = $('<tr><td>'+keyword+'</td><td>'+typeName+'</td><td class="norightborder"><a href="javascript:void(0);" onclick="pickItem('+id+', \''+keyword+'\', \''+type+'\');">选中</a></td></tr>')
				}else if(type==1){
					typeName="文本回复";
					$tr = $('<tr><td>'+keyword+'</td><td>'+typeName+'</td><td class="norightborder"><a href="javascript:void(0);" onclick="pickItem('+id+', \''+keyword+'\', \''+type+'\');">选中</a></td></tr>')
				}
				$tBody.append($tr);	
			}
			//分页
			var currentPage=data.currentPage;
			var total=data.total;
			var pages=data.pages;
			var previouspage=data.previouspage;
			var nextpage=data.nextpage;
			var pageText = '<div class="cLine"><div class="pageNavigator right"><div class="pages">共';
			pageText += total+"条记录  ";
			if(pages>0){
				pageText += currentPage;
			}else{
				pageText += 0;
			}
			pageText += "/" + pages + "页";
			if(currentPage>1){
				pageText += '<a href="javascript:go(1);">首页</a>';
			}
			if(previouspage>1){
				pageText += '<a href="javascript:go('+previouspage+');">上一页</a>';
			}
			if(nextpage < pages){
				pageText += '<a href="javascript:go('+nextpage+');">下一页</a>';
			}
			if(currentPage < pages){
				pageText += '<a href="javascript:go('+pages+');">最后一页</a>'
			}
			var $table = $(select+" table");
			$table.after(pageText);
		},'json');
	}
	function go(pageIndex){
		$(".layui-layer-content table tbody").html("");
		$(".layui-layer-content table").next().remove();
		makeData(pageIndex, '.layui-layer-content');
	}
	$(function(){
		makeData(1);
		
		$("#clear_fans").click(function(){
			$("#fans_id").val("");
			$("#input_groupinfos").val("");
		});
		$("#add_fans").click(function(){
			window.layerIndex = layer.open({
			    type: 1,
			    scrollbar: false,
			    area: ['600px', '450px'],
			    fix: true,
			    title: '选择粉丝',
			    content: $("#pick_item_com_one").html()
			});	
		});
		$("#add_tag").click(function(){
			window.layerIndex = layer.open({
			    type: 1,
			    scrollbar: false,
			    area: ['600px', '450px'],
			    fix: true,
			    title: '选择标签',
			    content: $("#pick_tag_com_one").html()
			});	
		});
		$(":radio[name='sendType']").click(function(){
			var val = this.value;
			var $group = $("#tr_group");
			var $fans = $("#tr_fans");
			if(val==1){
				$group.show();
				$fans.hide();
			}else if(val==2){
				$group.hide();
				$fans.show();
			}else if(val==3){
				$group.hide();
				$fans.hide();
			}
		});
		
		makeDataOne(1);
		makeDataTag(1);
	});
	
	function makeDataOne(pageIndex,select){
		var url = "${basePath}/admin/mass/fans";
		if(!select){
			select = "#pick_item_com_one";
		}
		var searchTxt = $(select+" #input_nickname").val();
		$.post(url, {"currentPage":pageIndex, "nickname":searchTxt}, function(data){
			$tBody = $(select+" table tbody");
			for(var i=0;i<data.recordList.length;i++){
				var bean = data.recordList[i];
				var openid = bean.openid;
				var nickname = bean.nickname;
				var groupname = bean.groupname;									
				var $tr = $('<tr><td>'+nickname+'</td><td>'+groupname+'</td><td class="norightborder">	<a href="javascript:void(0);" onclick="pickItemOne(\''+openid+'\', \''+nickname+'\');">选中</a></td></tr>')
				$tBody.append($tr);
			}
			//分页
			var currentPage=data.currentPage;
			var total=data.total;
			var pages=data.pages;
			var previouspage=data.previouspage;
			var nextpage=data.nextpage;
			var pageText = '<div class="cLine"><div class="pageNavigator right"><div class="pages">共';
			pageText += total+"条记录  ";
			if(pages>0){
				pageText += currentPage;
			}else{
				pageText += 0;
			}
			pageText += "/" + pages + "页";
			if(currentPage>1){
				pageText += '<a href="javascript:goOne(1);">首页</a>';
			}
			if(previouspage>1){
				pageText += '<a href="javascript:goOne('+previouspage+');">上一页</a>';
			}
			if(nextpage < pages){
				pageText += '<a href="javascript:goOne('+nextpage+');">下一页</a>';
			}
			if(currentPage < pages){
				pageText += '<a href="javascript:goOne('+pages+');">最后一页</a>'
			}
			var $table = $(select+" table");
			$table.after(pageText);
		},'json');
	}
	function makeDataTag(pageIndex,select){
		var url = "${basePath}/admin/mass/tag";
		if(!select){
			select = "#pick_tag_com_one";
		}
		var searchTxt = $(select+" #input_nickname").val();
		$.post(url, {"currentPage":pageIndex, "nickname":searchTxt}, function(data){
			$tBody = $(select+" table tbody");
			for(var i=0;i<data.recordList.length;i++){
				var bean = data.recordList[i];
				var tagId = bean.tagId;
				var tagName = bean.tagName;
				var tagStatus = bean.tagStatus;
					tagStatus = "微信标签";											
				var $tr = $('<tr><td>'+tagName+'</td><td>'+tagStatus+'</td><td class="norightborder"><a href="javascript:void(0);"  onclick="pickItemOneTag(\''+tagId+'\', \''+tagName+'\');">选中</a></td></tr>')
				$tBody.append($tr);
			}
			//分页
			var currentPage=data.currentPage;
			var total=data.total;
			var pages=data.pages;
			var previouspage=data.previouspage;
			var nextpage=data.nextpage;
			var pageText = '<div class="cLine"><div class="pageNavigator right"><div class="pages">共';
			pageText += total+"条记录  ";
			if(pages>0){
				pageText += currentPage;
			}else{
				pageText += 0;
			}
			pageText += "/" + pages + "页";
			if(currentPage>1){
				pageText += '<a href="javascript:goOneTag(1);">首页</a>';
			}
			if(previouspage>1){
				pageText += '<a href="javascript:goOneTag('+previouspage+');">上一页</a>';
			}
			if(nextpage < pages){
				pageText += '<a href="javascript:goOneTag('+nextpage+');">下一页</a>';
			}
			if(currentPage < pages){
				pageText += '<a href="javascript:goOneTag('+pages+');">最后一页</a>'
			}
			var $table = $(select+" table");
			$table.after(pageText);
		},'json');
	}
	
	function pickItemOne(openid, nickname){
		var oldVal = $("#fans_id").val(); 
		if(oldVal.indexOf(nickname)==-1){
			$("#fans_id").val(oldVal + nickname + ",");
		}
		var infos = $("#input_groupinfos").val();
		if(infos.indexOf(openid)==-1){
			$("#input_groupinfos").val(infos + openid + ",");
		}
		//layer.close(window.layerIndex);
	}
	function pickItemOneTag(tagId, tagName){
		
		$("#input_groupinfos").val(tagId);
		$("#input_tag_name").val(tagName);
		layer.close(window.layerIndex);
	}
	
	function search(){
		goOne(1);
	}
	
	function goOne(pageIndex){
		$(".layui-layer-content table tbody").html("");
		$(".layui-layer-content table").next().remove();
		makeDataOne(pageIndex, '.layui-layer-content');
	}
	function goOneTag(pageIndex){
		$(".layui-layer-content table tbody").html("");
		$(".layui-layer-content table").next().remove();
		makeDataTag(pageIndex, '.layui-layer-content');
	}
	
	function pickItem(id, keyword, type){
		$("#input_keyword").val(keyword);
		$("#input_content").val(id);
		$("#input_isMultipart").val(type);
		layer.close(window.layerIndex);
	}
	function closeWin(){
		layer.close(window.layerIndex);
	}
	function clearTag(){
		$("#groupInfos").val("");
		$("#input_tag_name").val("")
		
	}
</script>	
</body>
</html>